<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./less/index.css">
</head>

<body>
  <main class="w">
    <!-- 姓名、年龄、电话 -->
    <section class="info title question">
      <span class="required"></span>
      姓名：<input type="text">
      年龄：<input type="text">岁<br/>
      电话：<input type="text">
    </section>
    <!-- 性别 -->
    <section class="gender question">
      <header class="title">
        <span class="required"></span>
        您的性别是
      </header>
      <ul class="input-list column">
        <li class="myRadio">
          <input type="radio" name="gender" id="g1">
          <label for="g1">男</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="gender" id="g2">
          <label for="g2">女</label>
        </li>
      </ul>
    </section>
    <!-- 年级 -->
    <section class="garde question">
      <header class="title">
        <span class="required"></span>
        您现在的年级是
      </header>
      <ul class="input-list">
        <li class="myRadio">
          <input type="radio" name="garde" id="ga1">
          <label for="ga1">大一</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="garde" id="ga2">
          <label for="ga2">大二</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="garde" id="ga3">
          <label for="ga3">大三</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="garde" id="ga4">
          <label for="ga4">大四</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="garde" id="ga5">
          <label for="ga5">硕士在读</label>
        </li>
        <li class="myRadio">
          <input type="radio" name="garde" id="ga6">
          <label for="ga6">博士在读</label>
        </li>
      </ul>
    </section>
    <!-- 考虑因素 -->
    <section class="consideration question">
      <header class="title">
        <span class="required"></span>
        您在毕业后关于就业行业优先考虑的因素有 ？
        <span class="type-tip">&nbsp;【请选择1-6项】</span>
      </header>
      <ul class="input-list">
        <li class="myRadio">
          <input type="checkbox" name="garde" id="co1">
          <label for="co1">大一</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="co2">
          <label for="co2">大二</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="co3">
          <label for="co3">大三</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="co4">
          <label for="co4">大一</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="co5">
          <label for="co5">大一</label>
        </li>
      </ul>

      <footer  class="bottom">您已经选择0项,少选择了1项</footer>
    </section>
    <!-- 就业地考虑因素 -->
    <section class="address question">
      <header class="title">
        <span class="required"></span>
        关于毕业后就业地的选择 ，您最看重以下哪些因素？
        <span class="type-tip">&nbsp;【请选择1-3项】</span>
      </header>
      <ul class="input-list column">
        <li class="myRadio">
          <input type="checkbox" name="garde" id="ad1">
          <label for="ad1">大一</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="ad2">
          <label for="ad2">大二</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="ad3">
          <label for="ad3">大三</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="ad4">
          <label for="ad4">大一</label>
        </li>
        <li class="myRadio">
          <input type="checkbox" name="garde" id="ad5">
          <label for="ad5">大一</label>
        </li>
      </ul>
      <footer class="bottom">您已经选择0项,少选择了1项</footer>
    </section>
    <!-- 符合程度level -->
    <section class="detail question">
      <header class="title">
        <span class="required"></span>
        请您阅读下面的题目，并就每句话同个人实际情况的符合程度作出判断。
      </header>
      <table class="input-table">
        <thead>
          <tr>
            <th></th>
            <td>非常不符合</td>
            <td>不符合</td>
            <td>比较不符合</td>
            <td>比较符合</td>
            <td>符合</td>
            <td>非常符合</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1、我经常能从实习中找到乐趣</th>
            <td>
              <input type="radio" name="q6_0">
            </td>
            <td>
              <input type="radio" name="q6_1">
            </td>
            <td>
              <input type="radio" name="q6_2">
            </td>
            <td>
              <input type="radio" name="q6_0">
            </td>
            <td>
              <input type="radio" name="q6_1">
            </td>
            <td>
              <input type="radio" name="q6_2">
            </td>
          </tr>
          <tr>
            <th>2、我努力实习是为了以后有好的前途</th>
            <td>
              <input type="radio" name="q6_0">
            </td>
            <td>
              <input type="radio" name="q6_1">
            </td>
            <td>
              <input type="radio" name="q6_2">
            </td>
            <td>
              <input type="radio" name="q6_0">
            </td>
            <td>
              <input type="radio" name="q6_1">
            </td>
            <td>
              <input type="radio" name="q6_2">
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <!-- 进度条 -->
    <section class="progress">
      <span class="top">17%</span>
      <div class="center">
        <div class="content"></div>
      </div>
      <span class="bottom">进度</span>
    </section>
  </main>
  <section class="dialog">
    <div class="content">
      <span class="title">系统提示</span>
      <div class="desc">此题最多只能选择3项</div>
      <button class="primary">确认</button>
    </div>
  </section>

</body>

</html>
